<template>
  <div style="width: 100%; height: 30vh">
    <v-row style="margin-top: 5vh">
      <v-col style="margin-left: 10%">
        <v-row>
          <v-col style="max-width: 15%">
            <v-icon size="48px" color="#FD564F" style="border-radius: 25px">
              mdi-map-marker
            </v-icon>
          </v-col>
          <v-col style="margin-left: 1%; max-width: 32%">
            <v-row style="font-size: 32px">
              <div style="width: 100%; text-align: center">出发地</div>
            </v-row>
            <v-row style="font-size: 18px">
              <div style="width: 100%; text-align: center">Departure</div>
            </v-row>
          </v-col>
          <v-col style="margin-left: 3%">
            <v-row>
              <v-autocomplete
                v-model="fromProvince"
                :items="provinces"
                item-text="province"
                return-object
                menu-props="auto"
                prefix="省份"
                label="可输入搜索"
                hide-details
                single-line
                solo
              ></v-autocomplete>
            </v-row>
            <v-row style="padding-top: 10px">
              <v-autocomplete
                v-model="fromCity"
                :items="fromCities"
                item-text="city"
                return-object
                menu-props="auto"
                prefix="城市"
                label="可输入搜索"
                hide-details
                single-line
                solo
              ></v-autocomplete>
            </v-row>
          </v-col>
        </v-row>
      </v-col>
      <v-col style="margin-left: 3%">
        <v-row>
          <v-col style="max-width: 15%">
            <v-icon size="48px" color="#FD564F" style="border-radius: 25px">
              mdi-map-marker
            </v-icon>
          </v-col>
          <v-col style="margin-left: 1%; max-width: 32%">
            <v-row style="font-size: 32px">
              <div style="width: 100%; text-align: center">目的地</div>
            </v-row>
            <v-row style="font-size: 18px">
              <div style="width: 100%; text-align: center">Destination</div>
            </v-row>
          </v-col>
          <v-col style="margin-left: 3%">
            <v-row>
              <v-autocomplete
                v-model="toProvince"
                :items="provinces"
                item-text="province"
                return-object
                menu-props="auto"
                prefix="省份"
                label="可输入搜索"
                hide-details
                single-line
                solo
              ></v-autocomplete>
            </v-row>
            <v-row style="padding-top: 10px">
              <v-autocomplete
                v-model="toCity"
                :items="toCities"
                item-text="city"
                return-object
                menu-props="auto"
                prefix="城市"
                label="可输入搜索"
                hide-details
                single-line
                solo
              ></v-autocomplete>
            </v-row>
          </v-col>
        </v-row>
      </v-col>
      <v-col style="margin-left: 2.5%">
        <v-btn
          style="
            min-height: 5vh;
            min-width: 24%;
            border-radius: 32px;
            font-size: 18px;
          "
          color="error"
          @click="onSearch"
        >
          <v-icon>mdi-magnify</v-icon>搜索</v-btn
        >
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  name: "SelectHeader",
  data() {
    return {
      e1: "Alabama",
      e2: "Alabama",
      items: [],
      states: ["Alabama", "Alaska", "American Samoa", "Arizona"],
      provinces: [],
      fromProvince: {},
      toProvince: {},
      fromCity: {},
      toCity: {},
    };
  },
  created() {
    this.$api.policy.cityList().then((res) => {
      console.log("called");
      if (res.data.code === 200) {
        this.provinces = res.data.data;
        // console.log(this.provinces);
        console.log("success");
      } else {
        this.$Message.error("城市列表获取失败");
      }
    });
  },
  computed: {
    fromCities() {
      // conso
    //   console.log(this.fromProvince);
      return this.fromProvince.cities;
    },
    toCities() {
      return this.toProvince.cities;
    },
  },
  methods: {
    onSearch() {
      this.$api.policy.getPolicy(this.fromCity.city_id,this.toCity.city_id).then((res) => {
        if (res.data.code === 200) this.$emit("on-search", res.data.data);
      });
    },
  },
};
</script>

<style scoped>
</style>
